<template>
	<view class="device page bgf6">
	
		<scroll-view scroll-y="true" class="list bgf6" @scrolltolower="nextPage">
			<view v-for="(item,index) in list" class="bgff px14 py20 mx12 my16" @click="detail(item)">
				<view class="flex flexC flexB mb12">
					<view class="">
						<text>设备编号：{{item.sn}}</text>
						<text class="bgf6 r40 px10 py2 fs10 ml14" >{{item.type}}</text>
						
					</view>
					<text class="bged r40 bor41 py2 fs10 px10" v-if="item.status == 'online'">在线</text>
					<text class="bgff0 r40  py2 fs10 px10" v-else>离线</text>
					
				</view>
				<view class="mb12">设备主板号：{{item.device_sn}}</view>
				<view class="mb12">物联网卡号：{{item.sim}}</view>
				<view class="mb12">心跳时间：{{item.heart_time}}</view>
				
			</view>
		</scroll-view>


		<!-- 店铺选择 -->
		<uni-popup ref="shopPicker" type="bottom">
			<shop-list @search="search" :list="shopList" @onSelectShop="onSelectShop" @close="onClose"></shop-list>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusIndex: 0,
				bindList: ['全部', '已绑', "未绑"],
				statusList: ['全部', '在线', "离线"],
				bindIndex: 0,
				selectShop: null,
				shopList: [],
				keyword: '',
				list: [],
				page: 1,
				isLastPage: false,
				isnodata: false,
				status:'',
				bindStatus:''

			}
		},
		onLoad(option) {


			var select = option.selectShop;

			if (select != null) {
				this.selectShop = JSON.parse(select);
			}
			this.getShopList();
			this.getList();
		},
		methods: {
			
			detail(item){
				uni.setStorageSync("sn",item.device_sn);
				uni.navigateBack({
					delta:1
				})
			},
			
			changeStatus(e){
				var index = e.detail.value;
				this.statusIndex = index;
				console.info("===index==="+index);
				if(index == 0){
					this.status = "";
				}else if(index == 1){
					this.status = "online";
				}else {
					this.status ="offline";
				}
				this.page = 1;
				this.list = [];
				this.isLastPage = false;
				this.isnodata = false;
				this.getList();
			},

			changeBind(e){
				var index = e.detail.value;
				this.bindIndex = index;
				console.info("===index==="+index);
				if(index == 0){
					this.bindStatus = "";
				}else if(index == 1){
					this.bindStatus = 1;
				}else {
					this.bindStatus = -1;
				}
				this.page = 1;
				this.list = [];
				this.isLastPage = false;
				this.isnodata = false;
				this.getList();
			},

			nextPage() {
				if (this.isLastPage) return;
				this.page += 1;
				this.getList();
			},

			getList() {
				
				var param;
				if (this.selectShop != null) {

					 param = {
						page: this.page,
						shop_id: this.selectShop.id,
						status:this.status,
						bind:-1

					};
				}else{
					 param = {
						page: this.page,
						status:this.status,
						bind:-1
										
					};
				}

				let that = this;
				this.$api.deviceList(param).then(res => {
					if (res.code == 1) {
						let length = res.data.length;

						for (let i = 0; i < length; i++) {
							that.list.push(res.data[i]);
						}
						if (length < 10) {
							this.isLastPage = true;
						}
						if (that.list.length > 0) {
							that.isnodata = false;
						} else {
							that.isnodata = true;
						}
					} else {

					}
				})
			},

			getShopList() {
				let param = {
					keyword: this.keyword
				};
				let that = this;
				this.$api.getShopList(param).then(res => {

					console.info(JSON.stringify(res));
					if (res.code == 1) {
						that.shopList = res.data;
						if (that.shopList.length > 0) {

						}
					} else {

					}
				})
			},

			showShop() {
				this.$refs.shopPicker.open();

			},
			search(value) {

				this.keyword = value;
				this.getShopList();
			},

			onSelectShop(item) {
				this.selectShop = item;
				this.$refs.shopPicker.close();
				this.page = 1;
				this.list = [];
				this.isLastPage = false;
				this.isnodata = false;
				this.getList();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.device {
		.w12 {
			width: 24rpx;
			height: 24rpx;
		}

		.w150 {
			width: calc(50% - 52rpx);
		}

		.list {
			height: calc(100vh - 72rpx);
		}
	}
</style>
